<template>
  <div class="add-component-panel">
    <h4>添加组件</h4>
    <div class="component-list">
      <div v-for="comp in availableComponents" :key="comp.name" class="component-item" @click="addComponent(comp.name)">
        {{ comp.title }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AddComponentPanel",
    props: {
      pageKey: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        // 所有可用的组件模板库
        componentTemplates: {
          'search': {
            name: 'search',
            title: '搜索框',
            content: {
              placeholder: '请输入关键词'
            }
          },
          'banner': {
            name: 'banner',
            title: '轮播图',
            content: {
              enabled: true,
              list: []
            }
          },
          'nav': {
            name: 'nav',
            title: '导航菜单',
            content: {
              enabled: true,
              data: []
            }
          },
          'news': {
            name: 'news',
            title: '资讯列表',
            content: {
              enabled: true,
              title: '最新资讯'
            }
          },
          'user-info': {
            name: 'user-info',
            title: '用户信息',
            content: {
              defaultNickname: '未登录'
            }
          },
          'my-service': {
            name: 'my-service',
            title: '我的服务',
            content: {
              layout: 'vertical',
              title: '我的服务',
              items: []
            }
          },
          'user-banner': {
            name: 'user-banner',
            title: '广告图',
            content: {
              enabled: true,
              data: [{
                image: '',
                link: ''
              }]
            }
          }
        },
        // 定义每个页面可以添加哪些组件
        pageComponentMap: {
          home: ['search', 'banner', 'nav', 'news'],
          userCenter: ['user-info', 'my-service', 'user-banner'],
          customerService: [] // 客服页面不允许添加组件
        }
      }
    },
    computed: {
      availableComponents() {
        const availableNames = this.pageComponentMap[this.pageKey] || [];

        // ======================= 关键修复点 =======================
        return availableNames
          .map(name => {
            const component = this.componentTemplates[name];
            if (!component) {
              // 如果在模板库中找不到组件，打印一个警告，并忽略它
              console.warn(`AddComponentPanel: Component template for '${name}' not found.`);
              return null;
            }
            return component;
          })
          .filter(Boolean); // 使用 .filter(Boolean) 过滤掉所有 null 或 undefined 的项
        // ========================================================
      }
    },
    methods: {
      addComponent(name) {
        console.log(1111)
        const template = this.componentTemplates[name];
        if (!template) return;
        const newComponent = JSON.parse(JSON.stringify(template));
        this.$emit('add', newComponent);
      }
    }
  }
</script>

<style scoped>
  .add-component-panel {
    margin-top: 20px;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
  }

  h4 {
    margin-top: 0;
  }

  .component-list {
    display: flex;
    flex-wrap: wrap;
  }

  .component-item {
    width: 100px;
    height: 80px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0 10px 10px 0;
    transition: all 0.2s;
    user-select: none;
    /* 防止文字被选中 */
  }

  .component-item:hover {
    border-color: #409EFF;
    color: #409EFF;
  }
</style>
